<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" title='新增收货地址'></uni-nav-bar> -->

		<view class="form">
			<form @submit="submit">

				<view class="item uni-form-item uni-column">
					<view class="title">收件人</view>
					<input class="uni-input" :value="name1" name="name" placeholder="输入收件人姓名" />
				</view>

				<view class="item uni-form-item uni-column">
					<view class="title">电话号码</view>
					<input class="uni-input" :value="tel1" name="tel" placeholder="输入电话号码" />
				</view>

				<view class="item uni-form-item uni-column">
					<view class="title">所在地区</view>
					<pickerAddress style="margin-top:20rpx" @change="change">{{txt}}</pickerAddress>
				</view>

				<view class="item uni-form-item uni-column">
					<view class="title">详细地址</view>
					<input class="uni-input" :value="detail1" name='detail' placeholder="输入详细地址" />
				</view>

				<view class="item uni-form-item uni-column">
					<view class="title">设置默认地址</view>
					<switch v-if="switchshow" name='default' checked style="margin-top:10rpx" class="switch" />
					<switch v-else name='default' style="margin-top:10rpx" class="switch" />
				</view>

				<button class="sub" form-type="submit" type="default">提交</button>
				<button class="del" @click="del()" type="warn">删除收货地址</button>

			</form>

		</view>
	</view>
</template>

<script>
	import pickerAddress from "../../../../components/wangding-pickerAddress/wangding-pickerAddress.vue"
	import {
		findAllAddress,
		addAddressInfo,
		delAddressInfo,
		makeAddressDefaul,
		updateAddressInfo,
		switchDefault
	} from "../../../../api/my/address/address.js"
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				txt: '请选择收货地址',
				title: 'Hello',
				name1: "",
				tel1: '',
				detail1: "",
				switchshow: true,
				id: '',

			};
		},
		methods: {
			change(data) {
				this.txt = data.data.join(' ')
				console.log(data.data.join(' '))
			},
			// 提交修改
			submit(e) {
				console.log(e.detail.value);
				var value = e.detail.value
				console.log(value);
				if(value.default){
					switchDefault(this.id,1).then(res=>{
						console.log(res);
					})
				}
				updateAddressInfo({
					"city": this.txt,
					"defaultStatus": Number(value.default),
					"detailAddress": value.detail,
					"name": value.name,
					"phoneNumber": value.tel,
					id: this.id
				}).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: '修改成功'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1700)
					}
				})
			},
			// 删除地址
			del() {
				delAddressInfo(this.id).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: '删除成功'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1700)
					}
				})
			}
		},
		onLoad(e) {
			console.log(e);
			this.id = e.id;
			// 获取全部地址
			findAllAddress({}).then(res => {
				console.log(res);
				var arr = res.data.items.filter(el => {
					return el.id == e.id
				})
				this.name1 = arr[0].name;
				this.tel1 = arr[0].phoneNumber;
				this.txt = arr[0].city;
				this.detail1 = arr[0].detailAddress;
				this.switchshow = arr[0].defaultStatus ? true : false;
			})

		},

	}
</script>

<style lang="scss" scoped>
	.form {
		width: 710rpx;
		margin: 20rpx auto;
		border-radius: 12rpx;
		box-sizing: border-box;
		background-color: #fff;
		padding: 40rpx 0;

		.del {
			width: 710rpx;
			position: fixed;
			left: 20rpx;
			bottom: 180rpx;
			box-sizing: border-box;
		}

		.sub {
			width: 710rpx;
			background-color: #FFFFFF;
			position: fixed;
			box-sizing: border-box;
			left: 20rpx;
			bottom: 60rpx;
		}

		.item {
			width: 710rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			font-size: 26rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			.title {
				width: 200rpx;
				line-height: 80rpx;
				box-sizing: border-box;

			}

			input {
				font-size: 26rpx;
				text-indent: 20rpx;
				width: 600rpx;
				box-sizing: border-box;
				height: 80rpx;
				border: 2rpx solid #eee;
				border-radius: 12rpx;
			}

			textarea {
				font-size: 26rpx;
				border: 2rpx solid #eee;
				padding: 20rpx;
				box-sizing: border-box;
				box-sizing: border-box;
				border-radius: 12rpx;
			}
		}
	}
</style>
